<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <link href="https://raw.githubusercontent.com/LaserPeckerIst/Changelog/main/res/logo_ds.png" rel="icon"/>
    <link href="./css/base.css" rel="stylesheet"/>
    <link href="./css/scrollbar.css" rel="stylesheet"/>
    <title>App 统计</title>

    <!--body全屏显示样式-->
    <style>
        html, body, .full {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            background-color: #f7f8fa;
        }

        .full {
            display: block;
        }

        /*屏幕宽度大于1080时*/
        .full-width {
            width: 50%;
        }

        /*屏幕宽度小于1080时*/
        @media screen and (max-width: 1080px) {
            .full-width {
                width: 100%;
            }
        }

        .full-bar {
            width: 100%;
            height: auto;
        }

        .loading-wrap {
            display: flex;
            justify-content: center;
            align-items: center;
            top: 0;
            position: fixed;
            background-color: transparent;
        }

        #content {
            display: flex;
            flex-wrap: wrap;
        }

        /*2列*/
        .flex-item {
            /*flex: 1;*/
            padding: 1rem;
            overflow: hidden;
            transition: all 300ms ease-in-out;
        }

        .flex-item:hover {
            /*transform: scale(1.1);*/
            box-shadow: 0 0 8px 4px #00000014;
        }

        .linear-gradient-text {
            background: linear-gradient(90deg, #00c6ff, #0072ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            padding: 0.5rem;
        }

    </style>

    <!--引入jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

    <!--图表-->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!--    <script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/4.2.1/chart.min.js"></script>-->

    <!--加密-->
    <script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
    <!-- CDN example (jsDelivr) -->
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
    <!--友盟-->
    <script src="./js/chart.js"></script>
    <script src="./js/lp.umeng.js"></script>
  </head>
  <body>
    <div id="content" class="full">
      <div class="full-width flex-item">
        <h2 class="linear-gradient-text">App总用户数</h2>
        <div class="full-bar">
          <canvas id="userBar"></canvas>
        </div>
      </div>
      <div class="full-width flex-item">
        <h2 class="linear-gradient-text">设备型号统计</h2>
        <div class="full-bar">
          <canvas id="deviceNameBar"></canvas>
        </div>
      </div>
      <div class="full-width flex-item">
        <h2 class="linear-gradient-text">App版本活跃统计</h2>
        <div class="full-bar">
          <canvas id="appUserBar"></canvas>
        </div>
      </div>
      <div class="full-width flex-item">
        <h2 class="linear-gradient-text">固件版本活跃统计</h2>
        <div class="full-bar">
          <canvas id="deviceVersionBar"></canvas>
        </div>
      </div>
      <div class="full-width flex-item">
        <h2 class="linear-gradient-text">App功能使用统计</h2>
        <div class="full-bar">
          <canvas id="funBar"></canvas>
        </div>
      </div>
      <div class="full-width flex-item">
        <h2 class="linear-gradient-text">手机设备活跃统计</h2>
        <div class="full-bar">
          <canvas id="deviceBar"></canvas>
        </div>
      </div>
      <div class="full-width flex-item">
        <h2 class="linear-gradient-text">App语言活跃统计</h2>
        <div class="full-bar">
          <canvas id="languageBar"></canvas>
        </div>
      </div>
      <div class="full-width flex-item">
        <h2 class="linear-gradient-text">设备连接耗时统计</h2>
        <div class="full-bar">
          <canvas id="connectDurationBar"></canvas>
        </div>
      </div>
      <div class="full-width flex-item">
        <h2 class="linear-gradient-text">App异常统计</h2>
        <div class="full-bar">
          <canvas id="appErrorBar"></canvas>
        </div>
      </div>
      <div class="full-width flex-item">
        <h2 class="linear-gradient-text">设备雕刻耗时统计</h2>
        <div class="full-bar">
          <canvas id="engraveDurationBar"></canvas>
        </div>
      </div>
    </div>
    <div id="loading-wrap" class="full loading-wrap">
      <span id="startDate" class="loading linear-gradient-text">近期统计数据, 加载中...</span>
    </div>

    <script>
      if (startDate) {
        $("#startDate").html(`${startDate}至今,统计数据, 加载中...`)
      }

      //总共需要加载的数量
      let loadCount = 0 //android and iOS

      /*移除加载tag*/
      function removeLoading() {
        $("#loading-wrap").remove()
      }

      function checkLoad() {
        loadCount--
        if (loadCount <= 0) {
          removeLoading()
        }
      }

      // 用户总数
      loadCount += 1
      getAllAppData(function (data) {
        const labels = ["今日活跃用户", "昨日活跃用户", "今日新增用户", "昨日新增用户"]
        const appData = data.allAppData[0]
        const values = [appData.todayActivityUsers, appData.yesterdayActivityUsers, appData.todayNewUsers, appData.yesterdayNewUsers]
        const chartData = {
          labels: labels,
          datasets: [{
            label: `App总用户数(${appData.totalUsers})`,
            data: values,
            ...chartConfig
          }]
        }
        const config = {
          type: 'bar',
          data: chartData,
          options: {
            scales: {
              y: {
                beginAtZero: true,
                title: {
                  display: true,
                  text: '个'
                }
              }
            }
          },
        }

        destoryChart('userBar')
        charts.push(new Chart(
          document.getElementById('userBar'),
          config
        ))
        checkLoad()
      })

      /*各版本活跃用户数*/
      let appUserDataMap = {}

      function loadAppUserStatistics() {
        const url = `https://server.hingin.com/device/getVersionNumber`
        const body = {
          "phoneSystem": ""
        }
        if (onlyAndroid) {
          body["phoneSystem"] = "1"
        } else if (onlyIOS) {
          body["phoneSystem"] = "2"
        }

        $.ajax({
          url: `${url}?${$.now()}`,
          type: 'post',
          contentType: "application/json",
          data: JSON.stringify(body),
          success: function (data) {
            const dataList = data.data
            if (dataList) {
              dataList.forEach((item) => {
                let label = item.app_version.replaceAll("\.", "") + " "
                let labelValue = item.num || 0

                const oldValue = parseInt(appUserDataMap[label] || "0")
                const valueInt = labelValue + oldValue

                if (label && valueInt && valueInt > lpUmengFilter.appVersionMinCountThreshold) {
                  appUserDataMap[label] = valueInt
                }
              })
            }
            appUserDataMap = Object.fromEntries(
              Object.entries(appUserDataMap).sort(([, a], [, b]) => b - a)
            )
            const labels = Object.keys(appUserDataMap)
            const chartData = {
              labels: labels,
              datasets: [{
                label: 'App版本活跃统计',
                data: Object.values(appUserDataMap),
                ...chartConfig
              }]
            }
            const config = {
              type: 'bar',
              data: chartData,
              options: {
                scales: {
                  y: {
                    beginAtZero: true,
                    title: {
                      display: true,
                      text: '次'
                    }
                  }
                }
              },
            }

            charts.push(new Chart(
              document.getElementById('appUserBar'),
              config
            ))
          }
        })
      }

      loadAppUserStatistics()

      //功能统计数据
      getAndroidEventList(() => {
        const labels = Object.keys(eventCountMap)
        const chartData = {
          labels: labels,
          datasets: [{
            label: 'App功能使用统计',
            data: Object.values(eventCountMap),
            ...chartConfig
          }]
        }

        const config = {
          type: 'bar',
          data: chartData,
          options: {
            scales: {
              y: {
                beginAtZero: true,
                title: {
                  display: true,
                  text: '次'
                }
              }
            }
          },
        }

        destoryChart('funBar')
        charts.push(new Chart(
          document.getElementById('funBar'),
          config
        ))
        //no check
      })

      //手机设备活跃统计
      loadCount += isOnly ? 1 : 2
      getPhoneStatistics(map => {
        const labels = Object.keys(map)
        const chartData = {
          labels: labels,
          datasets: [{
            label: '手机设备活跃统计',
            data: Object.values(map),
            ...chartConfig
          }]
        }

        const config = {
          type: 'bar',
          data: chartData,
          options: {
            scales: {
              y: {
                beginAtZero: true,
                title: {
                  display: true,
                  text: '次'
                }
              }
            }
          },
        }

        destoryChart('deviceBar')
        charts.push(new Chart(
          document.getElementById('deviceBar'),
          config
        ))
        checkLoad()
      })

      //设备连接时长统计
      loadCount += isOnly ? 1 : 2
      getConnectDurationStatistics(map => {
        const labels = Object.keys(map)
        const chartData = {
          labels: labels,
          datasets: [{
            label: '设备连接耗时统计',
            data: Object.values(map),
            ...chartConfig
          }]
        }

        const config = {
          type: 'bar',
          data: chartData,
          options: {
            scales: {
              y: {
                beginAtZero: true,
                title: {
                  display: true,
                  text: '毫秒'
                }
              }
            }
          },
        }

        destoryChart('connectDurationBar')
        charts.push(new Chart(
          document.getElementById('connectDurationBar'),
          config
        ))
        checkLoad()
      })

      //固件版本使用统计
      loadCount += isOnly ? 1 : 2
      getDeviceVersionStatistics(map => {
        const labels = Object.keys(map)
        const values = Object.values(map)
        const chartData = {
          labels: labels,
          datasets: [{
            label: '固件版本活跃统计',
            data: values,
            ...chartConfig
          }]
        }

        const config = {
          type: 'bar',
          data: chartData,
          options: {
            scales: {
              y: {
                beginAtZero: true,
                title: {
                  display: true,
                  text: '次'
                }
              }
            }
          },
        }

        destoryChart('deviceVersionBar')
        charts.push(new Chart(
          document.getElementById('deviceVersionBar'),
          config
        ))
        checkLoad()
      })

      //语言使用统计
      loadCount += isOnly ? 1 : 2
      getPhoneLanguageStatistics(map => {
        const labels = Object.keys(map)
        const values = Object.values(map)
        const chartData = {
          labels: labels,
          datasets: [{
            label: 'App语言活跃统计',
            data: values,
            ...chartConfig
          }]
        }

        const config = {
          type: 'bar',
          data: chartData,
          options: {
            scales: {
              y: {
                beginAtZero: true,
                title: {
                  display: true,
                  text: '次'
                }
              }
            }
          },
        }

        destoryChart('languageBar')
        charts.push(new Chart(
          document.getElementById('languageBar'),
          config
        ))
        checkLoad()
      })

      //设备型号统计
      loadCount += isOnly ? 1 : 2
      getDeviceStatistics(map => {
        const labels = Object.keys(map)
        const values = Object.values(map)
        const chartData = {
          labels: labels,
          datasets: [{
            label: '设备型号统计',
            data: values,
            ...chartConfig
          }]
        }

        const config = {
          type: 'bar',
          data: chartData,
          options: {
            scales: {
              y: {
                beginAtZero: true,
                title: {
                  display: true,
                  text: '台'
                }
              }
            }
          },
        }

        destoryChart('deviceNameBar')
        charts.push(new Chart(
          document.getElementById('deviceNameBar'),
          config
        ))
        checkLoad()
      })

      //App异常统计
      loadCount += 1 //isOnly ? 1 : 2
      getAppErrorStatistics(map => {
        const labels = Object.keys(map)
        const values = Object.values(map)
        const chartData = {
          labels: labels,
          datasets: [{
            label: 'App异常统计',
            data: values,
            ...chartConfig
          }]
        }

        const config = {
          type: 'bar',
          data: chartData,
          options: {
            scales: {
              y: {
                beginAtZero: true,
                title: {
                  display: true,
                  text: '次'
                }
              }
            }
          },
        }

        destoryChart('appErrorBar')
        charts.push(new Chart(
          document.getElementById('appErrorBar'),
          config
        ))
        checkLoad()
      })

      //设备雕刻耗时统计
      loadCount += isOnly ? 1 : 2
      getEngraveDurationStatistics(map => {
        const labels = Object.keys(map)
        const values = Object.values(map)
        const chartData = {
          labels: labels,
          datasets: [{
            label: '设备雕刻耗时统计',
            data: values,
            ...chartConfig
          }]
        }

        const config = {
          type: 'bar',
          data: chartData,
          options: {
            scales: {
              y: {
                beginAtZero: true,
                title: {
                  display: true,
                  text: '毫秒'
                }
              }
            }
          },
        }

        destoryChart('engraveDurationBar')
        charts.push(new Chart(
          document.getElementById('engraveDurationBar'),
          config
        ))
        checkLoad()
      })

      //监听窗口大小变化
      $(window).resize(function () {
        charts.forEach((value) => {
          value.resize()
        })
      })
    </script>
  </body>
</html>
